<template>
	<!-- 查看单个商品页面 -->
	<div style="width: 100%;">
		<Header></Header>

		<!-- 查看单个组件 -->
		<div style="width: 1200px;margin: auto;margin-top: 30px;">
			<img :src="goods.imgs" class="tupian" width="300" height="400" />
			<div class="rq1">
				<h2>书名：{{goods.goodsname}}</h2>
				<span class="zz">价格:<span class="nr">{{goods.price}}元</span></span>
				<span class="zz">类别:<span class="nr">{{goods.typename}}</span></span>
				<span class="dj">点击率:<span class="nr">{{goods.lirun}}</span></span>
				<span class="time">上市日期:<span class="nr">{{goods.productiondate}}</span></span>
				<span class="time sj">
					<el-button type="danger" @click='addCard(goods)'>加购</el-button>
					<el-button type="danger" @click='shoucang(goods)'>收藏</el-button>
				</span>

			</div>
			<div style="width: 100%;clear: both;margin-left: 50px;">

				<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
					<el-tab-pane label="商品介绍" name="first" style="font-size: 20px;">
						<!-- <img :src="goods.imgs" width="1000" height="400" /> <br> <br> -->
						<div v-html='goods.gtext'></div>
					</el-tab-pane>
					<el-tab-pane label="商品评价" name="second">
						<span style="font-size: 20px;">评价:</span>
						<ul style="font-size: 14px;font-weight: 400;list-style: none;">
							<li v-for="p in pingjia" :key='p.cid' style="">
								<br>
								<span class="nr">分数：
									<el-rate v-model="p.fs" clearable />
								</span><br><br>
								<span class="nr" style="font-weight: 500;">内容：{{p.content}}</span> <br><br>

								<span class="nr">发布者: {{p.uid}} </span>
								<span class="nr">发布时间: {{formatTime(p.ctime)}}</span><br><br>
								<hr>
							</li>
						</ul>

					</el-tab-pane>
					<!-- 	<el-tab-pane label="Role" name="third">Role</el-tab-pane>
					<el-tab-pane label="Task" name="fourth">Task</el-tab-pane> -->
				</el-tabs>




			</div>


			<div class="neirong">

			</div>
		</div>
	</div>
</template>

<script>
	import Axios from 'axios'
	import {
		ElMessageBox,
		ElMessage
	} from 'element-plus'
	import router from "../route/index.js"
	import Header from './Header'
	export default {
		name: 'T',
		components: {
			Header
		},
		data() {
			return {
				activeName: 'first',
				goods: {},
				pingjia: [],
				card: {},
				users: {}
			}
		},
		created() {
			let str = sessionStorage.getItem('g');
			if (str == null) {
				router.push('/Notes');
			} else {
				//获取上一页选中的商品
				this.goods = JSON.parse(str);
				//浏览量页面加1
				this.goods.lirun += 1;
				//获取商品评价
				this.getpj();
				//更改浏览量 +1
				this.updateliulan();
			}

		},
		methods: {
			updateliulan(){//更改浏览量 +1
				Axios.post('/shopmng/api/books/updatelirun', {
					'id': this.goods.id
				}).then(res => {
					
				});
			},
			getpj() {//获取评价
				Axios.post('/shopmng/api/comments/selectById', {
					'gid': this.goods.id
				}).then(res => {
					this.pingjia = res.data;//得到的评价给页面的数组
				});
			},

			formatTime(val) {//格式化时间
				return val.substr(0, 10)
			},
			addCard(val) {//添加到购物车中
				this.getUsers();
				if (this.users.uid != null) {
					this.card.gid = val.id;
					this.card.uid = this.users.uid;
					Axios.post('/shopmng/api/card/selectOne', {
						gid: this.card.gid
					}).then(res => {
						// 如果购物车没有商品
						if (res.data.length == 0) {
							this.addChe();//添加到购物车中
						} else {//有商品改变数量
							let cid = res.data[0].cid;
							this.updateCard(cid);//改变数量
						}
					});
				}
			},
			updateCard(cid) {//改变数量
				Axios.post('/shopmng/api/card/updateNum', {
					'cid': cid
				}).then(res => {
					if (res.data.affectedRows == 1) {
						ElMessage({
							message: '添加成功，请在购物车查看!',
							type: 'success',
						});
					} else {
						ElMessage.error('添加失败')
					}
				});
			},
			addChe() {//添加到购物车中
				Axios.post('/shopmng/api/card/add', this.card).then(res => {
					if (res.data.affectedRows == 1) {
						ElMessage({
							message: '添加成功，请在购物车查看!',
							type: 'success',
						});
					} else {
						ElMessage.error('添加失败')
					}
				});
			},
			shoucang(g) {//先判断是否收藏过
				this.getUsers();
				if (this.users.uid != null) {
					Axios.post('/shopmng/api/shoucang/selectOne', {
						gid: g.id,
						uid:this.users.uid
					}).then(res => {
						if (res.data.length==0) {
							this.getsc(g);
						} else{
							ElMessage({
								message: '已经是您的收藏了',
								type: 'success',
							});
						}
						
					});
					
					
				}
			},
			getsc(g){//添加到收藏记录表中
				Axios.post('/shopmng/api/shoucang/insert', {
					gid: g.id,
					uid:this.users.uid
				}).then(res => {
					if (res.data.affectedRows == 1) {
						ElMessage({
							message: '收藏成功',
							type: 'success',
						});
					} else {
						ElMessage.error('收藏失败')
					}
					
				});
			},
			getUsers() {
				// 获取sessionstorage中的用户信息
				let str = sessionStorage.getItem('users')
				if (str != null) {
					//把字符串转换成对象 --- sessionStorage存的必须时字符串，所以取出来的也是字符串
					this.users = JSON.parse(str);
				} else {
					ElMessage({
						message: '请先去登录，马上为您跳转',
						type: 'warning',
					});
					router.push('/Login')
				}
			}

		},

	}
</script>

<style>
	.tupian {
		float: left;
		margin: 50px;
	}

	.rq1 {
		width: 500px;
		float: left;
		margin-top: 50px;
	}

	h2 {
		width: 300px;
		/* float: left; */
		font-size: 24px;
		text-align: left;
		margin: 0px 0px 30px 0px;
	}

	.sj {
		padding-left: 150px;
	}

	.zz,
	.dj,
	.time,
	.ms {
		width: 300px;
		float: left;
		font-size: 15px;
		text-align: left;
		line-height: 50px;
		margin-left: 10px;
	}

	.nr {
		margin-left: 20px;
	}

	.neirong {
		width: 500px;
		height: 400px;
		float: left;
		margin-left: 40px;
	}

	.demo-tabs {
		/* font-size: 80px */
	}

	.demo-tabs>.el-tabs__content {
		padding: 20px;
		color: #6b778c;
		font-size: 32px;
		font-weight: 600;
	}
</style>
